/*
 * @Description: 选中角色详情
 * @Author: Rfan
 * @Date: 2022-03-31 14:00:56
 * @LastEditTime: 2022-05-25 08:59:31
 */

import { useMemo } from 'react';
import { Tabs } from 'antd';
import classNames from 'classnames/bind';
import { useRoleContext } from '../contexts/RoleContext';
import PaneOperate from './PaneOperate';
import InfoPane from './InfoPane';
import RoleListPane from './RoleListPane';
// import RetrievalPane from './RetrievalPane';

import styles from '../styles/rolePane.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;
const RoleTabs = () => {
  const { selectRoleId, selectTab, changeActiveTab } = useRoleContext();

  /**
   * @description: tab栏右侧节点
   * @return {ReactElement} 节点
   */
  const slot = useMemo(() => {
    return <PaneOperate />;
  }, []);

  return (
    <div className={cx('user-pane')}>
      {selectRoleId && (
        <Tabs activeKey={selectTab} tabBarExtraContent={slot} onChange={changeActiveTab}>
          <TabPane tab="角色信息" key="1">
            <InfoPane />
          </TabPane>
          <TabPane tab="用户列表" key="2">
            <RoleListPane />
          </TabPane>
          {/* <TabPane tab="全文检索权限" key="3">
          <RetrievalPane/>
        </TabPane> */}
        </Tabs>
      )}
    </div>
  );
};

export default RoleTabs;
